<template>
	<view v-if="question">
		<view class="subject fpt40 c3763 bold" v-if="question.questiontype !== 3">【{{qtStr}}】{{question.title}}</view>
		<view class="subject fpt40 c3763 bold" v-if="question.questiontype === 3">【{{qtStr}}】{{question.stems[0].content}}</view>
		<view class="questionStem">
			<!--单选题(官方判断题)-->
			<view class="question1" v-if="question.questiontype === 1 || question.questiontype === 7">
				<view class="questionItem reflect2" :class="{optionActive: myanswer===item.index}" v-for="(item,index) in question.stems" :key="index" @click="pickOption(index)">
					<!-- <image class="correct" src="../../static/img/test/checked.png"></image> -->
					<view class="serialNumber">{{item.index}}</view>
					{{item.content}}
				</view>
			</view>
			<!--多选题-->
			<view class="question1" v-if="question.questiontype === 2">
				<view class="questionItem reflect2" :class="{optionActive: optionStatus[index]}" v-for="(item,index) in question.stems" :key="index" @click="pickMultiple(item,index)">
					<!-- <image class="correct" src="../../static/img/test/checked.png"></image> -->
					<view class="serialNumber">{{item.index}}</view>
					{{item.content}}
				</view>
			</view>
			<!--判断题-->
			<view class="question1" v-if="question.questiontype === 3">
				<view class="questionItem reflect2" style="padding-left: 30rpx;" :class="{optionActive: judge==='true'}" @click="check('true')">
					<!-- <image class="correct" src="../../static/img/test/checked.png"></image> -->
					正确
				</view>
				<view class="questionItem reflect2" style="padding-left: 30rpx;" :class="{optionActive: judge==='false'}" @click="check('false')">
					<!-- <image class="correct" src="../../static/img/test/checked.png"></image> -->
					错误
				</view>
			</view>
			<!-- 连线题 -->
			<view class="question1" v-if="question.questiontype === 4"  style="position:relative;">
				<canvas id="mycanvas" canvas-id="myCanvas" :style="'width: '+ canvasWidth + 'px;height:' + canvasHeight + 'px;'"></canvas>
				<canvas id="mycanvasL" canvas-id="myCanvasL" @touchcancel="touchcancelHandler" @mouseleave="touchcancelHandler2" @touchstart="touchstartHandler"  @touchend="touchendHandler" @mouseup="touchendHandler2" :style="'width: '+ canvasWidth + 'px;height:' + canvasHeight + 'px;position:absolute;top: 0;left: 0;'"></canvas>
			</view>
			<!--排序题-->
			<view class="question1" v-if="question.questiontype === 5">
				<drag-sorts :list="ql" @confirm="sorted"></drag-sorts>
			</view>
			<!--填空题-->
			<view class="question1" v-if="question.questiontype === 6">
				<textarea class="gapInput reflect2" :data-index="index" :placeholder="'请输入第' + (index + 1) + '空的答案'" :value="gapResult[index]" @input="getGapAnswer" v-for="(item, index) in gapGroup" :key="index"></textarea>
			</view>
			<!--填字题-->
			<view class="question1" v-if="question.questiontype === 8">
				<view class="sudoku">
					<view class="reselect reflect1" @click="initGridArray" hover-class="reselectAct">重新选择</view>
					<view class="gridGroup clear">
						<view class="gridItem left" v-for="(item, index) in gridArray" :key="index">
							<view class="gridView reflect2" :class="{gridAct: gridChecked[index]}" @click="gridChange(index)">
								<view class="gridIndex">{{gridNum[index]}}</view>{{item}}
							</view>
						</view>
					</view>
					<!-- <view class="reselect" @click="initGridArray" hover-class="reselectAct">重新选择</view> -->
				</view>
			</view>
			<!-- 问答题 -->
			<view class="question1" v-if="question.questiontype === 9">
				<textarea class="subjectInput reflect2" @input="answerEssays" :value="myanswer" placeholder="请输入答案"></textarea>
			</view>
		</view>
	</view>
</template>

<script>
	import dragSorts from './HM-dragSorts/HM-dragSorts.vue'
	export default {
		name: 'questionItem',
		components:{
			dragSorts
		},
		data() {
			return {
				ismobile: null,
				myanswer: '',
				isanswer: false,
				multipleOption: [],
				optionStatus: [],
				//判断题
				judge: 0,
				//排序题
				ql: [],
				//填空题
				gapGroup: [],
				gapResult: [],
				//连线题
				leftstem: [],
				rightstem: [],
				//填字题
				gridLimit: 0,
				gridArray: [],
				gridChecked: [],
				gridNum: [],
				gridCurIndex: 0,
				//连线题数据
				canvasWidth: 600,
				canvasHeight: 100,
				leftHeight: 300,
				rightHeight: 300,
				canvasRate: 2,
				ctx: null,
				ctxL: null,
				canvasRendered: false,
				leftList: [],
				rightList: [],
				moveFlag: false,
				lineStart: {},
				lineEnd: {},
			};
		},
		inject: ['questionPage'],
		props:{
			question:{
				type: Object,
				default: ()=>{}
			},
			answer:{
				type: Object,
				default: ()=>{}
			}
		},
		computed: {
			qtStr(){
				switch(this.question.questiontype){
					case 1:
						return '单选题'
					case 2:
						return '多选题'
					case 3:
						return '判断题'
					case 4: 
						return '连线题'
					case 5:
						return '排序题'
					case 6:
						return '填空题'
					case 7:
						return '判断题'
					case 8:
						return '填字题'
					case 9:
						return '问答题'
					default:
						return ''
				}
			}
		},
		mounted(){
			if(navigator){
				this.ismobile = navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i)
			}
		},
		watch:{
			question:{
				handler(val){
					try{
						if(!val){
							return
						}
						
						this.isanswer = val.isanswer
						let curAs = this.questionPage.taskContent.result[val.idx].answer
						if(val.questiontype === 4){
							this.initCanvas()
							this.$nextTick(()=>{
								this.ctx.clearRect(0, 0, this.canvasWidth, this.canvasHeight)
								this.canvasRendered = false
								const fontsize = 20 * this.canvasRate
								const itemWidth = Math.ceil(100 * this.canvasRate)
								const textWidth = Math.ceil(80 * this.canvasRate)
								const leftCenter = Math.ceil(50 * this.canvasRate)
								const rightCenter = Math.ceil(250 * this.canvasRate)
								const itemPadding = Math.ceil(14 * this.canvasRate)
								const itemMargin = Math.ceil(20 * this.canvasRate)
								const textPadding = Math.ceil(5 * this.canvasRate)
								this.ctx.setFontSize(fontsize)
								this.ctxL.setFontSize(fontsize)
								this.leftList = []
								this.rightList = []
								this.curLineArr = []
								if(curAs !== null && curAs !== undefined){
									if(curAs === ''){
										curAs = []
									}
									if(typeof curAs === 'string'){
										curAs = JSON.parse(curAs)
									}
									this.curLineArr = curAs.filter(e=>e.indexright!=='')
									this.complete()
								}
								this.curActive = {
									left: null,
									right: null
								},
								this.answerContent = []
								val.stems.forEach((e, i)=>{
									this.leftList.push(e.stemleft)
									this.rightList.push(e.stemright)
								})
								this.leftList = this.getItemInfo('left', this.leftList, textWidth, fontsize, itemPadding, itemMargin, textPadding)
								this.rightList = this.getItemInfo('right', this.rightList, textWidth, fontsize, itemPadding, itemMargin, textPadding)
								this.canvasHeight = Math.max(this.leftHeight, this.rightHeight)

								// this.$nextTick(()=>{
									setTimeout(()=>{
										this.drawItems(this.leftList.concat(this.rightList), this.ctx,  leftCenter, rightCenter)
									}, 100)
								// })
							})
						}
						if(curAs === null || curAs === '' || (curAs instanceof Array && curAs.length === 0)){
							//未填写答案
							this.uncomplete()
							if(val.questiontype === 1 || val.questiontype === 7 || val.questiontype === 9){
								this.myanswer = ''
							}
							if(val.questiontype === 2 && val.stems){
								this.myanswer = []
								this.optionStatus = new Array(val.stems.length)
								this.optionStatus.fill(false)
							}
							if(val.questiontype === 3 && val.stems){
								this.myanswer = ''
								this.judge = 0
							}
							if(val.questiontype === 4){
								// this.leftstem = []					
								// this.rightstem = []
								// this.myanswer = []
								// val.stems.forEach(e => {
								// 	this.leftstem.push(e.stemleft)
								// 	this.rightstem.push(e.stemright)
								// 	this.myanswer.push({indexleft: e.stemleft.index, indexright: "0"})
								// })
								// this.complete()
							}
							if(val.questiontype === 5){
								this.ql = []
								val.stems.forEach(e=>{
									this.ql.push({name: e.content, num: e.index})
								})
								this.getMachResult(this.ql)
								this.isanswer = true
								this.complete()
							}
							if(val.questiontype === 6){
								
								this.gapGroup = val.title.match(/_________/g) || []
								this.gapResult = new Array(this.gapGroup.length).fill('0')
								this.gapResult.forEach((e, i)=>{
									// this.gapResult[i] = ''
									this.$set(this.gapResult, i, '')
								})
								this.getGapAnswer()
								// this.complete()
							}
							if(val.questiontype === 8){
								if(typeof val.title === 'string'){
									var matchArr = val.title.match(/(\(\s*\))|(（\s*）)/g)
									if(matchArr){
										this.gridLimit = matchArr.length
									}
								}
								// this.complete()
								this.initGridArray()
							}
						}else{
							//已经填写过答案
							this.complete()
							if(val.questiontype === 1 || val.questiontype === 7 || val.questiontype === 9){
								this.myanswer = curAs
							}
							if(val.questiontype === 2 && val.stems){
								this.myanswer = JSON.parse(curAs)
								this.optionStatus = new Array(val.stems.length)
								this.optionStatus.fill(false)
								this.myanswer.forEach(e=>{
									const num = e.charCodeAt() - 65
									this.optionStatus[num] = true
								})
							}
							if(val.questiontype === 3 && val.stems){
								this.myanswer = curAs
								if(typeof curAs === 'string'){
									this.myanswer = JSON.parse(curAs)
								}
								if(this.myanswer[0].result === '对'){
									this.judge = 'true'
								}else if(this.myanswer[0].result === '错'){
									this.judge = 'false'
								}else{
									this.judge = 0
								}
							}
							if(val.questiontype === 4){
								this.leftstem = []					
								this.rightstem = []
								this.myanswer = []
								val.stems.forEach(e => {
									this.leftstem.push(e.stemleft)
									this.rightstem.push(e.stemright)
									this.myanswer.push({indexleft: e.stemleft.index, indexright: "0"})
								})
								this.complete()
							}
							if(val.questiontype === 5){
								this.ql = []
								val.stems.forEach(e=>{
									this.ql.push({name: e.content, num: e.index})
								})
								if(curAs !== null){
									let orderArr = curAs.split('，')
									this.ql = orderArr.map((e, i)=>{
										return this.ql[i * 1]
									})
								}
								this.getMachResult(this.ql)
								this.isanswer = true
								this.complete()
							}
							if(val.questiontype === 6){
								if(typeof curAs === 'string'){
									curAs = JSON.parse(curAs)
								}
								this.gapGroup = val.title.match(/_________/g) || []
								this.gapResult = new Array(this.gapGroup.length).fill('0')
								this.gapResult.forEach((e, i)=>{
									// this.gapResult[i] = curAs[i].result
									this.$set(this.gapResult, i, curAs[i].result)
								})
								this.getGapAnswer()
								this.complete()
							}
							if(val.questiontype === 8){
								if(typeof val.title === 'string'){
									var matchArr = val.title.match(/(\(\s*\))|(（\s*）)/g)
									if(matchArr){
										this.gridLimit = matchArr.length
									}
								}
								this.complete()
								this.initGridArray()
								if(curAs){
									this.myanswer = curAs
									curAs = JSON.parse(curAs)
									if(curAs.length > 0){
										this.gridCurIndex = curAs.length
										this.gridArray.forEach((e, i)=>{
											let n = curAs.indexOf(e)
											if(n > -1){
												this.gridChecked[i] = true
												this.gridNum[i] = n * 1 + 1
												this.gridAnswer.push(this.gridArray[i])
											}
										})
									}
									this.isanswer = true
								}
							}
						}
					}catch(err){
						this.$toast('题库解析出错')
						let taskData = ''
						if(this.questionPage.taskContent){
							taskData = this.questionPage.taskContent
						}
						var logData = {
							msg: '题目解析错误',
							data: {
								taskid: this.questionPage.taskContent.taskid,
								taskData,
								question: this.question
							},
							error: err.message,
							stack: err.stack
						} 
						this.questionErrorLog(logData)
						this.$emit('skip')
					}
				},
				immediate: true
			}
			// answer(val){
			// 	console.log(val)
			// },
			// myanswer(val){
				
			// }
		},
		methods:{
			initCanvas(){
				let screenWidth = 375, screenHeight = 667
				const sysInfo = uni.getSystemInfoSync()
				//#ifdef MP-WEIXIN
				screenWidth = sysInfo.windowWidth
				screenHeight = sysInfo.windowWidth
				this.canvasRate = screenWidth / 375
				this.canvasWidth = screenWidth / 375 * 350
				//#endif
				//#ifdef H5
				if(sysInfo.screenWidth > sysInfo.screenHeight){
					screenHeight = 1080
					screenWidth = 607
					this.canvasRate = 607 / 375
				}else{
					if(window.injectedObject){
						screenWidth = window.injectedObject.getW()
						screenHeight = window.injectedObject.getH()
					}else{
						screenWidth = window.innerWidth
						screenHeight = window.innerHeight
					}
					this.canvasRate = screenWidth / 375
					this.canvasWidth = screenWidth / 375 * 350
				}
				//#endif
				
			
				this.ctx = uni.createCanvasContext('myCanvas', this)
				this.ctxL = uni.createCanvasContext('myCanvasL', this)
			},
			//单选
			pickOption(index){
				this.myanswer = this.question.stems[index].index
				this.isanswer = true
				this.complete()
			},
			//多选
			pickMultiple(item,index){
				if(!this.optionStatus[index]){
					this.myanswer.push(item.index)
				}else{
					this.myanswer = this.myanswer.filter((e)=>{
						return e !== item.index
					})
				}
				this.myanswer = this.myanswer.sort()
				this.$set(this.optionStatus, index, !this.optionStatus[index])
				for(let i=0; i<this.optionStatus.length; i++){
					if(this.optionStatus[i]){
						this.complete()
						this.isanswer = true
						return
					}
				}
				this.uncomplete()
				this.isanswer = false
			},
			//判断
			check(param){
				// const result = param ? '对' : '错'
				let result = '对'
				if(param === 'false'){
					result = '错'
				}
				this.judge = param
				this.myanswer = [{index: "1", result: result}]
				this.complete()
				this.isanswer = true
			},
			complete(){
				this.questionPage.complete = true
			},
			uncomplete(){
				this.questionPage.complete = false
			},
			sorted(e){
				// console.log('排序完毕')
				this.ql = e.list
				this.getMachResult(e.list)
				this.complete()
			},
			getMachResult(list){
				let arr = []
				list.forEach(e=>{
					arr.push(e.num)
				})
				// let str = arr.toString().replace(/,/g, '，')
				this.myanswer = arr.join('，')
			},
			getGapAnswer(event){
				if(event){
					this.complete()
					this.gapResult[event.currentTarget.dataset.index] = event.detail.value
				}
				var filled = true
				this.myanswer = this.gapResult.map((e, i)=>{
					if(e === ''){
						filled = false
					}
					let obj = {index: i + 1 + '', result: e}
					return obj
				})
				this.isanswer = filled
			},
			//填字题
			initGridArray(){
				this.myanswer = ''
				this.isanswer = false
				this.gridChecked = []
				this.gridNum = []
				this.gridAnswer = []
				this.gridCurIndex = 0
				let stems = this.question.stems
				if(!stems){
					this.gridArray = []
					return
				}
				var res = []
				var arr = stems.split(/\||｜/)
				arr.forEach((e, i)=>{
					res[i] = e
					this.$set(this.gridChecked, i, false)
					this.$set(this.gridNum, i, '')
				})
				this.gridCurIndex = 0
				this.gridArray = res
				return
			},
			gridChange(index){
				if(this.gridChecked[index] || this.gridCurIndex === this.gridLimit){
					return
				}
				this.gridCurIndex++ 
				this.gridChecked[index] = true
				this.gridNum[index] = this.gridCurIndex
				this.gridAnswer.push(this.gridArray[index])
				this.myanswer = JSON.stringify(this.gridAnswer)
				if(this.gridCurIndex === this.gridLimit){
					this.isanswer = true
					this.complete()
				}
				this.$forceUpdate()
				// this.updateAnswer()
			},
			answerEssays(e){
				this.myanswer = e.detail.value
				if(e.detail.value !== ''){
					this.isanswer = true
					this.complete()
				}else{
					this.isanswer = false
					this.uncomplete()
				}
			},
			//答完题后清除数据
			// initData(){
			// 	this.myanswer = ''
			// 	this.multipleOption = []
			// }
			
			//连线题
			/***********/
			addAnswer(){
				this.curLineArr = this.curLineArr.filter((e, i)=>{
					return (e.indexleft !== this.curActive.left.index && e.indexright !== this.curActive.right.index)
				})
				const pair = {indexleft: this.curActive.left.index, indexright: this.curActive.right.index}
				this.curLineArr.push(pair)
				// this.myanswer = JSON.stringify(this.curLineArr)
				
				if(this.curLineArr.length !== this.question.stems.length){
					this.uncomplete()
					this.question.isanswer = false
				}else{
					this.complete()
					this.question.isanswer = true
				}
				this.updateAnswer()
			},
			touchstartHandler(event){
				return
				if(!this.canvasRendered){
					return
				}
				this.canvasRendered = false
				const items = this.leftList.concat(this.rightList)
				const point = event.touches[0]
				for(let i=0;i<items.length; i++){
					let rect = this.getRectFromItem(items[i])
					if(this.insideCheck(point, rect)){
						// 点中选项卡
						this.startItem = items[i]
						// this.reRender()
						this.moveFlag = true
						break
					}
				}
			},
			touchcancelHandler(e){
				if(!this.ismobile){
					return
				}
				this.canvasRendered = true
			},
			touchcancelHandler2(e){
				if(this.ismobile){
					return
				}
				this.canvasRendered = true
			},
			touchendHandler2(event){
				if(this.ismobile){
					return
				}
				let canvas = document.getElementById(event.target.id)
				let rect = canvas.getBoundingClientRect()
				this.moveFlag = false
				if(!this.canvasRendered){
					return
				}
				this.canvasRendered = false
				const items = this.leftList.concat(this.rightList)
				// const point = event.changedTouches[0]
				const point = {x: event.clientX - rect.x, y: event.clientY - rect.y}
				for(let i=0;i<items.length; i++){
					let rect = this.getRectFromItem(items[i])
					if(this.insideCheck(point, rect)){
						// if(items[i] === this.startItem){
						if(items[i]){
							this.curActive[items[i].questiontype] = items[i]
							if(this.curActive.left && this.curActive.right){
								//匹配成功添加到答案中
								this.addAnswer()
								// this.reRender()
								this.curActive = {
									left: null,
									right: null
								}
							}
						}
					}
				}
				this.startItem = null
				this.reRender()
			},
			touchendHandler(event){
				if(!this.ismobile){
					return
				}
				this.moveFlag = false
				if(!this.canvasRendered){
					return
				}
				this.canvasRendered = false
				const items = this.leftList.concat(this.rightList)
				const point = event.changedTouches[0]
				for(let i=0;i<items.length; i++){
					let rect = this.getRectFromItem(items[i])
					if(this.insideCheck(point, rect)){
						// if(items[i] === this.startItem){
						if(items[i]){
							this.curActive[items[i].questiontype] = items[i]
							if(this.curActive.left && this.curActive.right){
								//匹配成功添加到答案中
								this.addAnswer()
								// this.reRender()
								this.curActive = {
									left: null,
									right: null
								}
							}
						}
					}
				}
				this.startItem = null
				this.reRender()
			},
			
			//获取选项位置信息
			getRectFromItem(item){
				let rect = {
					y1: item.itemY,
					y2: item.itemY + item.itemHeight
				}
				if(item.questiontype === 'left'){
					rect.x1 = 0
					rect.x2 = Math.ceil(100 * this.canvasRate)
				}
				if(item.questiontype === 'right'){
					rect.x1 = Math.ceil(200 * this.canvasRate)
					rect.x2 = Math.ceil(300 * this.canvasRate)
				}
				return rect
			},
			//判断是否点中选项卡
			insideCheck(point, rect){
				if(point.x >= rect.x1 && point.x <= rect.x2 && point.y >= rect.y1 && point.y <= rect.y2){
					return true
				}
				return false
			},
			//获取选项卡连线节点
			getMiddlePoint(item){
				let x = Math.ceil(100 * this.canvasRate)
				if(item.questiontype === 'right'){
					x = Math.ceil(200 * this.canvasRate)
				}
				const p = {
					x,
					y: item.itemMiddleY
				}
				return p
			},
			getItemInfo(type, arr, w, fs, ip, im, tp){
				try{
					const itemWidth = Math.ceil(100 * this.canvasRate)
					let topCursor = 10 * this.canvasRate
					arr.forEach((e, i)=>{
						if(i > 0){
							// 第二项起加外边距
							topCursor += im
						}
						arr[i].num = i
						arr[i].questiontype = type
						arr[i].textCenter = type === 'left' ? Math.ceil(50 * this.canvasRate) : Math.ceil(250 * this.canvasRate)
						arr[i].itemY = topCursor
						//加项目内补 
						topCursor += ip
						const width = this.ctx.measureText(e.content).width
						const lines = Math.ceil(width / w)
						const step = Math.ceil(e.content.length / lines)
						arr[i].contentList = []
						//文本按字数等分几行显示
						for(let k=0;k<e.content.length; k+=step){
							let item = e.content.substring(k, k + step)
							if(k > 0){
								// 第二行起文字加文本间距
								topCursor += tp
							}
							if(item.length > 0){
								// 加行高
								topCursor += fs
								arr[i].contentList.push({text: item, line: k, textY: topCursor})
							}
						}
						topCursor += ip
						arr[i].itemHeight = topCursor - arr[i].itemY
						arr[i].itemWidth = itemWidth
						arr[i].itemMiddleY = Math.ceil(arr[i].itemY + (arr[i].itemHeight / 2))
					})
					// if(topCursor >  this.canvasHeight){
					// this.canvasHeight = topCursor + 30
					// }
					if(type === 'left'){
						this.leftHeight = topCursor + 30
					}
					if(type === 'right'){
						this.rightHeight = topCursor + 30
					}
				}catch(err){
					this.$toast('题目解析失败')
				}
				return arr
			},
			drawItems(list, ctx, leftCenter, rightCenter){
				const radius = 15 * this.canvasRate
				ctx.clearRect(0, 0, this.canvasWidth, this.canvasHeight)
				let itemX =  0
				let center = leftCenter
	
				//绘制底色
				// ctx.save()
				ctx.setFillStyle('#bde0ec')
				ctx.shadowOffsetX = 4
				ctx.shadowOffsetY = 5
				ctx.shadowBlur = 2
				ctx.shadowColor = 'rgba(10,133,234,0.1)'
				list.forEach((e, i)=>{
					if(list[i].questiontype === 'right'){
						itemX = Math.ceil(200 * this.canvasRate)
						center = rightCenter
					}
					let pl = this.getPath(e, itemX)
					
					ctx.beginPath()
					ctx.moveTo(pl.p1.x, pl.p1.y)
					ctx.lineTo(pl.p2.x, pl.p2.y)
					ctx.arcTo(pl.p3.x, pl.p3.y, pl.p4.x, pl.p4.y, radius)
					ctx.lineTo(pl.p4.x, pl.p4.y)
					ctx.arcTo(pl.p5.x, pl.p5.y, pl.p6.x, pl.p6.y, radius)
					ctx.lineTo(pl.p6.x, pl.p6.y)
					ctx.arcTo(pl.p7.x, pl.p7.y, pl.p8.x, pl.p8.y, radius)
					ctx.lineTo(pl.p8.x, pl.p8.y)
					ctx.arcTo(pl.p9.x, pl.p9.y, pl.p1.x, pl.p1.y, radius)
					ctx.closePath()
					ctx.fill()
				})
				// ctx.restore()
				//绘制文本
				// ctx.save()
				ctx.setTextAlign('center')
				ctx.setFillStyle('#339999')
				
				let reflectArr = []
				list.forEach((e, i)=>{
					itemX = 0
					center = leftCenter
					if(list[i].questiontype === 'right'){
						itemX = Math.ceil(200 * this.canvasRate)
						center = rightCenter
					}
					let pl = this.getPath(e, itemX)
					reflectArr.push(pl)
					e.contentList.forEach(e=>{
						ctx.fillText(e.text, center, e.textY)
					})
				})
				reflectArr.forEach(pl=>{
					ctx.drawImage('../../static/img/test/reflectLight.png', pl.p1.x - (12 * this.canvasRate), pl.p1.y + (4 * this.canvasRate), 16 * this.canvasRate, 18 * this.canvasRate)
				})
				// ctx.restore()
				ctx.draw()
				this.reRender()
			},
			getPath(e, itemX){
				//添加圆角参数将矩形参数转为圆角矩形路径参数
				const radius = 15 * this.canvasRate
				let x0 = itemX, y0 = e.itemY, x1 = itemX + e.itemWidth, y1 = e.itemY + e.itemHeight
				return {
					p1:{x: x0 + radius, y: y0},
					p2:{x: x1 - radius, y: y0},
					p3:{x: x1, y: y0},
					p4:{x: x1, y: y1 - radius},
					p5:{x: x1, y: y1},
					p6:{x: x0 + radius, y: y1},
					p7:{x: x0, y: y1},
					p8:{x: x0, y: y0 + radius},
					p9:{x: x0, y: y0}
				}
			},
			reRender(){
				//连线
				this.ctxL.clearRect(0, 0, this.canvasWidth, this.canvasHeight)
				const lx = Math.ceil(100 * this.canvasRate)
				const rx = Math.ceil(200 * this.canvasRate)
				let actItemList = []
				let lineList = []
				this.curLineArr.forEach((e, i) => {
					const startItem = this.leftList.find((item)=>{
						return item.index === e.indexleft
					})
					actItemList.push(startItem)
					// this.renderActive(startItem)
					const p1 = {x:lx, y: startItem.itemMiddleY}
					const endItem = this.rightList.find((item) => {
						return item.index === e.indexright
					})
					// this.renderActive(endItem)
					actItemList.push(endItem)
					const p2 = {x: rx, y: endItem.itemMiddleY}
					lineList.push({p1, p2})
				})
				this.renderLine(lineList)
				
				this.renderActive(actItemList)
				this.renderActive([this.curActive.left, this.curActive.right], '#FFCC33', 'rgba(232,142,12,0.1)')
				this.ctxL.draw()
				this.canvasRendered = true
			},
			renderLine(arr){
				this.ctxL.save()
				this.ctxL.setStrokeStyle('#b3e162')
				this.ctxL.setLineWidth(3)
				this.ctxL.setLineCap('round')
				arr.forEach(e=>{
					const {p1, p2} = e
					this.ctxL.beginPath()
					this.ctxL.moveTo(p1.x, p1.y)
					this.ctxL.lineTo(p2.x, p2.y)
					this.ctxL.closePath()
					this.ctxL.stroke()
				})
				this.ctxL.restore()
			},
			renderActive(actList, backgroundColor='#b3e162', shadow='rgba(0,153,0,0.2)'){
				if(!actList){
					return 
				}
				console.log(actList)
				this.ctxL.save()
				this.ctxL.setFillStyle(backgroundColor)
				this.ctxL.shadowOffsetX = 4
				this.ctxL.shadowOffsetY = 5
				this.ctxL.shadowBlur = 2
				this.ctxL.shadowColor = shadow
				actList.forEach(el =>{
					if(!el){
						return
					}
					let x = 0
					if(el.questiontype === 'right'){
						x = Math.ceil(200 * this.canvasRate)
					}
					const radius = 15 * this.canvasRate
					const pl = this.getPath(el, x)
					this.ctxL.beginPath()
					this.ctxL.moveTo(pl.p1.x, pl.p1.y)
					this.ctxL.lineTo(pl.p2.x, pl.p2.y)
					this.ctxL.arcTo(pl.p3.x, pl.p3.y, pl.p4.x, pl.p4.y, radius)
					this.ctxL.lineTo(pl.p4.x, pl.p4.y)
					this.ctxL.arcTo(pl.p5.x, pl.p5.y, pl.p6.x, pl.p6.y, radius)
					this.ctxL.lineTo(pl.p6.x, pl.p6.y)
					this.ctxL.arcTo(pl.p7.x, pl.p7.y, pl.p8.x, pl.p8.y, radius)
					this.ctxL.lineTo(pl.p8.x, pl.p8.y)
					this.ctxL.arcTo(pl.p9.x, pl.p9.y, pl.p1.x, pl.p1.y, radius)
					this.ctxL.closePath()
					this.ctxL.fill()		
					
				})
				this.ctxL.restore()
				this.ctxL.setTextAlign('center')
				this.ctxL.setFillStyle('#ffffff')
				// this.ctxL.setFontSize(32)
				// this.ctxL.setFontSize(20 * this.canvasRate)
				this.ctxL.font = `bold ${20 * this.canvasRate}px sans-serif`
				actList.forEach(el =>{
					if(!el){
						return
					}
					let x = 0
					if(el.questiontype === 'right'){
						x = Math.ceil(200 * this.canvasRate)
					}
					const radius = 15 * this.canvasRate
					const pl = this.getPath(el, x)
					el.contentList.forEach((e, i)=>{
						this.ctxL.fillText(e.text, el.textCenter, e.textY)
					})
					this.ctxL.drawImage('../../static/img/test/reflectLight.png', pl.p1.x - (12 * this.canvasRate), pl.p1.y + (4 * this.canvasRate), 16 * this.canvasRate, 18 * this.canvasRate)
					this.ctxL.drawImage('../../static/img/test/dec3.png', pl.p3.x - (28 * this.canvasRate), pl.p3.y - (8 * this.canvasRate), 38 * this.canvasRate, 44 * this.canvasRate)
				})
			},
			updateAnswer(){
				this.$emit('updateAnswer')
			}
		}
	}
</script>

<style lang="scss">
@import "../../common/style/public.css";
$color: #191a1a;
.subject{
	font-weight: 36rpx;
	color: $color;
	position: relative;
	margin-right: 74rpx;
	padding-top: 45px;
	// margin-left: 76rpx;
	// margin-right: 74rpx;
	// &:before{
	// 	content: '';
	// 	position: absolute;
	// 	width: 16rpx;
	// 	top: 0;
	// 	bottom: 0;
	// 	left: -36rpx;
	// 	border-radius: 8rpx;
	// 	background: #2C95F8;
	// }
}
.questionStem{
	margin-top: 60rpx;
}
.question1{
	margin: 0 76rpx 0 0;
	.questionItem{
		position: relative;
		margin-top: 40rpx;
		border-radius: 80rpx;
		padding: 30rpx;
		padding-left: 134rpx;
		padding-right: 100rpx;
		background-color: #9cbce3;
		color: #5d709d;
		font-size: 40rpx;
		// box-shadow: 7rpx 10rpx 5rpx rgba(10,133,234, 0.2);
		.correct{
			position: absolute;
			width: 120rpx;
			height: 90rpx;
			right: -20rpx;
			top: -5rpx;
			opacity: 0;
		}
		.serialNumber{
			color: #5d709d;
			// font-family: 'zihun64hao-mengquruantangti';
			font-size: 50rpx;
			text-align: center;
			text-indent: 0.2em;
			position: absolute;
			top: 26rpx;
			left: 30rpx;
			width: 60rpx;
			height: 60rpx;
			line-height: 60rpx;
			// background:url('../../static/img/test/index.png') no-repeat;
			// background-size: 100% 100%;
		}
	}
	.optionActive{
		color: white;
		// font-weight: bold;
		background-color: #1d73af;
		// box-shadow: 7rpx 10rpx 5rpx rgba(0,153,0,0.2);
		.correct{
			opacity: 1;
		}
		.serialNumber{
			color: #ffffff;
			// font-size: 50rpx;
			// text-indent: 0.2em;
			// position: absolute;
			// top: 10rpx;
			// left: 26rpx;
			// width: 60rpx;
			// height: 60rpx;
			// line-height: 60rpx;
			// background:url('../../static/img/test/index.png') no-repeat;
			// background-size: 100% 100%;
		}
	}
	.gapInput{
		color: #555;
		font-size: 28rpx;
		width: 100%;
		// display: block;
		box-sizing: border-box;
		height: 100rpx;
		padding: 30rpx;
		margin-top: 10px;
		background-color: #e4e4eb;
		// border-radius: 32rpx;
	}
	.subjectInput{
		font-size: 28rpx;
		width: 598rpx;
		box-sizing: border-box;
		padding: 30rpx;
		margin-top: 10px;
		color: #339999;
		background-color: rgba(44,161,255,0.23);
		border-radius: 32rpx;
		height: 220rpx;
	}
}
.gridView{
	position: relative;
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	text-align: center;
	background: #ebf6ff;
	
}

.gridGroup{
	width: 750rpx;
	// margin-left: -20rpx;
	.gridItem{
		margin-left: 30rpx;
		margin-bottom: 55rpx;
		width: 210rpx;
		height: 130rpx;
		box-sizing: border-box;
		// border: 28rpx solid transparent;
		.gridView{
			font-size: 40rpx;
			position: relative;
			width: 100%;
			height: 100%;
			line-height: 130rpx;
			border-radius: 32rpx;
			// overflow: hidden;
			// display: flex;
			// flex-direction: column;
			// justify-content: center;
			text-align: center;
			// background: #ebf6ff;
			color: #339999;
			background-color: #bde0ec;
			box-shadow: 7rpx 10rpx 5rpx rgba(10,133,234,.5);
			.gridIndex{
				display: none;
				position: absolute;
				width: 35rpx;
				height: 35rpx;
				line-height: 35rpx;
				border-radius: 50%;
				overflow: hidden;
				color: #bde0ec;
				background-color: #ffffff;
				right: 25rpx;
				top: 5rpx;
			}
		}
	}
}
.sudoku{
	position: relative;
	left: -76rpx;
	width: 750rpx;
	.gridItem .gridAct{
		box-shadow: 7rpx 10rpx 5rpx rgba(0,153,0,.2);
		font-weight: bold;
		font-size: 40rpx;
		&::after{
			content: '';
			position: absolute;
			width: 100rpx;
			height: 120rpx;
			top: -10rpx;
			right: -20rpx;
			background-image: url('../../static/img/test/dec3.png');
			background-size: 100% 100%;
		}
		.gridIndex{
			display: block;
		}
		background-color: #b3e162;
		color: #ffffff;
	}
	.reselect{
		font-size: 30rpx;
		position: relative;
		width: 200rpx;
		height:60rpx;
		line-height: 60rpx;
		border-radius: 15rpx;
		margin: 20rpx auto 30rpx;
		text-align: center;
		background-color: #f4ab6e;
		color: #ffffff;
		box-shadow: 7rpx 7rpx 5rpx rgba(153,106,0,.15);
	}
	.reselectAct{
		// color: #2C95F8;
		// background: #ffffff;
	}
}
// .reflect2{
// 	background-image: url('../../static/img/test/reflectLight.png');
// 	background-repeat: no-repeat;
// 	background-position: 8rpx 8rpx;
// 	background-size: 42rpx 48rpx;
// }
</style>
